<template>
  <div class="city">
  <Title></Title>

  <!-- 列表 -->
  <div class="home_list">
    <div class="inner" style="padding: 0;">
      <div class="city_arr">
          <div class="city_list">

              <div class="city_item" :class="[cityid == index ? 'cityactive':'']" v-for="(item,index) in citydata" @click="citytab(index,item.id)">
                {{item.name}}
                <div class="city_info" @click.stop="pageurl(item.mch_domain)">
                  <span>前往分站</span>
                </div>
              </div>
          </div>
          <div class="city_frist" v-for="(items,indexs) in cityparent">
            <div class="city_tit" @click="pageurl(items.mch_domain)">
              {{items.ext_name}}
            </div>
            <div class="city_frist_right">
                <div class="city_frist_item" v-for="(item,index) in items.domains" @click="pageurl(item.mch_domain)">
                  {{item.ext_name}}
                </div>
            </div>
          </div>
      </div>
      <div class="list" v-if="hot.length!=0">
        <div class="list_tit">
          <div class="list_left">推荐商品</div>
          <div class="list_many"></div>
        </div>
        <div class="list_box">
          <div class="list_item" v-for="(item,index) in hot" :key="index" v-if="index<6" @click="detailurl(item)">
            <div class="item_img">
              <img :src="[item.goods_img]">
            </div>
            <div class="list_info">
              <div class="list_name txt-cut3">{{item.goods_name}}</div>
              <div class="list_price">￥{{item.goods_price}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-drawer
    :visible.sync="drawer"
    size="100%">
        <img :src="[copydata]" alt="" srcset="">
  </el-drawer>
  </div>
</template>

<script>
import {hotapi, cityapi, pddcopyapi, noOwningClick} from "../../api/http.js"
  import Title from "../../components/title.vue"
  export default {
    name: 'city',
    components:{
      Title
    },
    data(){
      return{
        hot:[],
        cityid:0,
        citydata:[],
        cityparent:[],
        drawer: false,
        copydata:[]
      }
    },
   async created() {
       this.cityfn({
         pid:""
       })
      const res = await hotapi()
      if(res.data.code==200){
        this.hot= res.data.data
      }else{
        this.hot= []
      }
      console.log(res.data.data);
    },
    methods:{
     async cityfn({pid}){
        const res = await cityapi({
          pid
        })
        if (res.data.code==200) {
          console.log(res.data.data.top_domain);
          console.log(res.data.data.parent_domain);
           this.citydata= res.data.data.top_domain
           this.cityparent = res.data.data.parent_domain
        } else{
          this.citydata= []
          this.cityparent =[]
        }
      },
      async _getpddcopy({mp_page}){
         const res = await pddcopyapi({mp_page})
         if (res.data.code==200) {
           console.log(res.data);
           this.copydata = res.data.data.qrcode
         } else{
            this.copydata=""
         }
       },
      detailurl(item){

          noOwningClick();
          this.copydata=""
          this._getpddcopy({
            mp_page:item.page_path
          })
          console.log(item.page_path);
          this.drawer = !this.drawer
      },
      pageurl(url){
        window.open("http://"+url)
      },
     citytab(index,id){
        this.cityid = index
        this.cityfn({
          pid:id
        })
      }
    }
  }
</script>

<style lang="less" scoped>
@import url('~@/assets/style/var.less');
   @import url(../../../static/index.less);
    .city_none{
      width: 100%;
      height: 300px;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .city_arr{
      width: 100%;
      padding-bottom: 50px;
      .city_list{
        width: 100%;
        padding: 10px 0 ;
       border-bottom: 1px solid rgb(255, 68, 68);
        margin-bottom: 10px;
        .city_item{
         display: inline-block;
         padding: 10px 30px;
         font-size: 16px;
         cursor: pointer;
         border-bottom: 1px solid #fff;
         position: relative;
         color: @txt-color;
         .city_info{
            position: absolute;
            z-index: 10;
            background-color: #fff;
            width: 100%;
            padding: 10px 0px;
            box-sizing: border-box;
            bottom: -39px;
            left: 0;
            text-align: center;
            // line-height:;
            display: none;
            color: #2440b3;
            span{
              border-bottom: 1px solid #2440b3;
            }
         }
        }
        .cityactive{
          color:rgb(255, 68, 68);
          border-bottom: 1px solid rgb(255, 68, 68);
        }
        .city_item:hover{
          color:rgb(255, 68, 68);;
          border-bottom: 1px solid rgb(255, 68, 68);
          .city_info{
            display: block;
          }
        }
      }
      .city_frist{
        width: 100%;
        padding: 10px 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px dashed #292929;
        .city_tit{
          width: 100px;
          font-size: 14px;
          text-align: center;
          padding: 8px 0;
          border-bottom: 1px solid #fff;
          color: @txt-color;
        }
        .city_tit:hover{
          color:rgb(255, 68, 68);;
          border-bottom: 1px solid rgb(255, 68, 68);
        }
        .city_frist_right{
          flex: 1;
          .city_frist_item{
              display: inline-block;
              padding: 8px 20px;
              font-size: 14px;
              cursor: pointer;
              border-bottom: 1px solid #fff;
              color: @txt-color;
          }
          .city_frist_item:hover{
            color:rgb(255, 68, 68);;
            border-bottom: 1px solid rgb(255, 68, 68);
          }
        }
      }
    }

</style>
